<template>
  <div class="Gif-box2">
    <img class="Gif Gif1" :src="publicUrls + 'free/style1/1.gif'" alt="" />
    <img class="Gif Gif2" :src="publicUrls + 'free/style1/2.gif'" alt="" />
    <img class="Gif Gif3" :src="publicUrls + 'free/style1/3.gif'" alt="" />
    <img class="Gif Gif4" :src="publicUrls + 'free/style1/4.gif'" alt="" />
    <img class="Gif Gif5" :src="publicUrls + 'free/style1/5.gif'" alt="" />
    <img class="Gif Gif6" :src="publicUrls + 'free/style1/6.gif'" alt="" />
    <img class="Gif Gif7" :src="publicUrls + 'free/style1/7.gif'" alt="" />
  </div>
</template>

<script >
export default defineComponent({
  name: 'style2',
});
</script>    

<script setup>
import { publicUrls } from '@/utils/minxin';
import { defineComponent } from 'vue';
const props = defineProps({
  indexs: {
    type: Number,
  },
});
</script>

<style lang="less" scoped>
.Gif-box2 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  .Gif {
    position: absolute;
    top: 0;
    width: auto;
    height: auto;
    opacity: 0.2;
  }
  .Gif1 {
    width: 526px;
    height: 526px;
    top: 120px;
    left: 400px;
  }
  .Gif2 {
    width: 272px;
    height: 152px;
    left: 1400px;
  }
  .Gif3 {
    width: 354px;
    height: 354px;
    left: 40%;
  }
  .Gif4 {
    width: 500px;
    height: 448px;
    top: 210px;
    right: 50px;
  }
  .Gif5 {
    width: 392px;
    height: 392px;
    right: 20%;
  }
  .Gif6 {
    width: 112px;
    height: 112px;
    top: 140px;
    right: 20%;
  }
  .Gif7 {
    width: 512px;
    height: 512px;
    top: 200px;
    left: 50%;
  }
}
</style>